<template>
  <div class="BaseSearchBar">
    <el-card body-style="padding:0px">
      <el-row type="flex"
              justify="flex-start">
        <!-- 标题 -->
        <el-col :span="2"
                type="flex1">
          <div class="search-title">条件搜索栏</div>
        </el-col>
        <!-- 搜索关键字 -->
        <el-col :span="5">
          <BaseSearchBarItem>
            <div slot="lable"
                 class="key">搜索关键字:</div>
            <div slot="input">
              <el-input v-model="SearchKey"
                        placeholder="请输入关键字" />
            </div>
          </BaseSearchBarItem>
        </el-col>

        <!-- 配对状态 -->
        <el-col :span="4">
          <BaseSearchBarItem>
            <div slot="lable">配对状态:</div>
            <div slot="input">
              <el-select v-model="SearchState"
                         placeholder="全部">
                <el-option v-for="item in PairState"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </div>
          </BaseSearchBarItem>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="2"
                style="margin-left: 12px;">
          <el-button type="primary"
                     class="button1"
                     size="medium">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
export default {
  name: "BaseSearchBar",
  components: {
    BaseSearchBarItem
  },
  props: {
    isShow: {
      input: null,
      key: null
    }
  },
  data () {
    return {
      SearchState: "",
      PairState: [
        {
          value: "已配对",
          label: "已配对"
        },
        {
          value: "未配对",
          label: "未配对"
        },
        {
          value: "无法配对",
          label: "无法配对"
        }
      ],
      SearchKey: "",
      SearchMenst: ""
    };
  }
};
</script>
<style>
.search-title {
  color: #696969;
  border-right: 1px solid #c2c2c2;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.BaseSearchBar {
  font-size: 15px;
}
</style>
